<template>
    <view class="content">
        <image src="../../static/image/bg_5.png" class="bg-5"></image>
		
		<view class="item" v-for="(item, index) in list" :key="index" @click="$gTo(`./details?id=${item.id}`)">
			<view class="top">
				<view class="sta" v-if="item.status == 0">待解读</view>
				<view class="sta sta2" v-else>已解读</view>
			</view>
			<view class="down">
				<view class="down-l">
					<view class="name">{{item.nickname}}</view>
					<view class="link">{{item.relation}}</view>
				</view>
				<view class="down-r">
					<view class="time">{{item.report_time}}</view>
					<view class="i-btn" @click.stop="toKefu">咨询医生</view>
				</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
		
		<view class="footer">
			<view class="tip">
				<u-icon name="error-circle-fill" color="#8b99ae" size="28" class="u-m-t-4"></u-icon>
				<view class="u-flex-1 u-p-l-10">
					在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。
					<text class="tip-xy" @click="show = true">《线上咨询服务协议》</text>
					上传
				</view>
			</view>
			
			<view class="btn" @click="$gTo(`./edit`)">上传体检报告</view>
		</view>
		
		<u-mask :show="show" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <view class="pop-up2">
		                <view class="pop-tit">{{content.title}}</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">
									<u-parse :html="content.content"></u-parse>
								</view>
							</scroll-view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
				show: false,
				content: {},
            };
        },
        onLoad() {
            this.getContent()
        },
		onShow() {
			this.list = []
			this.page = 1
			this.status = 'loadmore'
			this.getList()
		},
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
			toKefu() {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc7b92dee1aa6e7fe5';
				// this.$gTo(`/pages/pay/web`)
			},
			
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('get_reports', {
                    userToken: this.$getSync('userToken'),
                    page: this.page,
                    limit: 10,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.length > 0) {
                        	this.list = this.list.concat(ret.data);
                        	this.page++;
                        	this.status = 'loadmore'
                        } else {
                        	this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
			
			getContent() {
				this.$ajax('get_content', {
			        type: 3,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.footer{
		width: 750rpx;
		padding: 0 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding-bottom: 130px;
	}
	.bg-5{
		width: 750rpx;
		height: 325rpx;
	}
	.item{
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx;
	}
	.top{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-bottom: 10rpx;
	}
	.sta{
		padding: 8rpx 16rpx;
		border-radius: 0 20rpx 0 20rpx;
		font-size: 22rpx;
		color: #fff;
		line-height: 1;
		background-color: #fe8928;
	}
	.sta2{
		background-color: #a0a8b8;
	}
	.down{
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.down-l{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.name{
		font-size: 36rpx;
		font-weight: bold;
		word-break: break-all;
		white-space: pre-line;
		padding-bottom: 8rpx;
	}
	.link{
		font-size: 22rpx;
		color: #666c7f;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		background-color: #eff3f7;
	}
	.down-r{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		padding-left: 20rpx;
	}
	.time{
		font-size: 24rpx;
		color: #4f4f4f;
		padding-bottom: 8rpx;
	}
	.i-btn{
		padding: 12rpx 25rpx;
		font-size: 26rpx;
		color: #00b6bc;
		border: 2rpx solid #00b6bc;
		border-radius: 50rpx;
	}
	
	.tip{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 24rpx;
		color: #4f4f4f;
		line-height: 1.5;
		margin: 20rpx;
	}
	.tip-xy{
		color: #fd8926;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 40rpx 20rpx;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-up2{
		width: 616rpx;
		padding: 50rpx 40rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}

</style>
